<template>
  <div class="container">
    <h2>自习室参数管理</h2>

    <div class="card">
      <!-- 基本信息区域 -->
      <div class="form-item">
        <label>自习室名</label>
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </div>

      <div class="form-item">
        <label>状态</label>
        <el-select v-model="form.status" placeholder="选择状态">
          <el-option label="待审批" value="待审批"></el-option>
          <el-option label="通过" value="通过"></el-option>
          <el-option label="拒绝" value="拒绝"></el-option>
        </el-select>
      </div>

      <!-- 时间设置 -->
      <div class="form-row">
        <div class="form-item">
          <label>开店馆时间</label>
          <el-date-picker
              v-model="form.time1"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择时间"
          ></el-date-picker>
        </div>
        <div class="form-item">
          <label>闭馆时间</label>
          <el-date-picker
              v-model="form.time2"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择时间"
          ></el-date-picker>
        </div>
      </div>

      <!-- 位置信息 -->
      <div class="form-row">
        <div class="form-item">
          <label>经度</label>
          <el-input v-model="form.longitude" placeholder="输入经度"></el-input>
        </div>
        <div class="form-item">
          <label>纬度</label>
          <el-input v-model="form.latitude" placeholder="输入纬度"></el-input>
        </div>
      </div>

      <!-- 简介 -->
      <div class="form-item full-width">
        <label>简介</label>
        <el-input
            v-model="form.content"
            type="textarea"
            rows="3"
            placeholder="输入自习室简介"
        ></el-input>
      </div>

      <!-- 图片上传 -->
      <div class="form-item full-width">
        <label>图片</label>
        <div class="image-upload">
          <el-upload
              :action="$baseUrl + '/files/upload'"
              :headers="{ token: user.token }"
              list-type="picture"
              :on-success="handleUpload"
          >
            <el-button size="small" type="primary">上传图片</el-button>
          </el-upload>

          <el-image
              v-if="form.photo"
              :src="form.photo"
              :preview-src-list="[form.photo]"
              class="preview-img"
          ></el-image>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="btn-group">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SysRoom",
  data() {
    return {
      form: {},
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      originalData: {} // 用于重置的原始数据
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    // 加载数据
    loadData() {
      this.$request.get('/sysRoom/selectPage', {
        params: { pageNum: 1, pageSize: 1 }
      }).then(res => {
        this.form = res.data?.list[0] || {};
        this.originalData = JSON.parse(JSON.stringify(this.form)); // 深拷贝原始数据
      });
    },

    // 保存数据
    save() {
      this.$request({
        url: this.form.id ? '/sysRoom/update' : '/sysRoom/add',
        method: this.form.id ? 'PUT' : 'POST',
        data: this.form
      }).then(res => {
        if (res.code === '200') {
          this.$message.success('保存成功');
        } else {
          this.$message.error(res.msg || '保存失败');
        }
      });
    },

    // 重置表单
    reset() {
      this.form = JSON.parse(JSON.stringify(this.originalData));
    },

    // 图片上传成功
    handleUpload(response) {
      this.form.photo = response.data;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f7fa;
}

h2 {
  color: #333;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e6eb;
}

.card {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 表单样式 */
.form-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.form-item label {
  width: 90px;
  color: #666;
  margin-right: 15px;
  text-align: right;
}

.form-item .el-input,
.form-item .el-select,
.form-item .el-date-picker {
  width: 300px;
  border-radius: 4px;
}

/* 行布局 */
.form-row {
  display: flex;
  gap: 20px;
}

/* 全屏宽度项 */
.full-width {
  align-items: flex-start;
}

.full-width .el-input {
  width: 100%;
  max-width: 600px;
}

/* 图片上传区域 */
.image-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

/* 按钮区域 */
.btn-group {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 10px;
}

</style>
